<!-- 一户多人口增加气量申请/低保户申请 -->
<template>
  <div class="heating-apply-for">
    <PageTitle class="boxTitle" :text="title"></PageTitle>

    <div class="con-box detailContent">
      <div class="primary-tit title">
        {{ type === '1' ? '一户多人口用户办理手续' : '低保户用户办理手续' }}
      </div>
      <h3>提供：</h3>
      <template v-if="type === '1'">
        <b class="b">1、房屋产权人有效身份证明原件或者复印件。</b>
        <b class="b">2、《居民户口薄》户主页、增减页或居住证《户口本、居住证上的地址需与用户编号绑定的地址一致》原件或复印件。</b>
        <b class="b">“一户多人口”认定有效期为 1 年，客户在年周期届满前重新申请，经复核后符合条件的，继续执行“一户多人口”标准，经复核后不符合条件的，取消“一户多人口”气量，执行普通居民客户气量标准。</b>
      </template>
      <template v-if="type === '2'">
        <b class="b">1、低保户有效身份证明原件或复印件</b>
        <b class="b">2、低保证明原件或复印件（低保证明上的地址需与用户编号绑定地址一致）</b>
        <b class="b">低保户优惠认定有效期为 1 年，客户在年周期届满前重新申请经复核后符合条件的，续执行“低保户优惠”，经复核后不符合条件的，取消“低保户优惠”，执行普通客户气量气价标准。</b>
      </template>

      <div class="primary-tit title">申请信息</div>
      <div>
        <tui-form ref="form">
          <!-- 用户编号 -->
          <tui-input
              label="用户编号"
              :required="true"
              :lineLeft="false"
              placeholder="请输入用户编号"
              v-model="formData.number"
          ></tui-input>
          <!-- 用户姓名 -->
          <tui-input
              label="用户姓名"
              :required="true"
              :lineLeft="false"
              placeholder="请输入用户姓名"
              v-model="formData.name"
          ></tui-input>
          <!-- 用户电话 -->
          <tui-input
              label="用户电话"
              :required="true"
              :lineLeft="false"
              type="number"
              placeholder="请输入联系电话"
              v-model="formData.phone"
              maxlength="11"
          ></tui-input>

          <!-- 用户身份证（上传图片） -->
          <tui-upload
              label="用户身份证"
              :required="true"
              :maxCount="5"
              :preview="true"
              v-model="formData.id_card_list"
              :server-url="'/api/file/upload'"
              @complete="handleUploadComplete($event,'id_card_list')"
              @remove="handleImageRemove('id_card_list')"
              placeholder="请上传身份证照片"
          ></tui-upload>

          <!-- 房产证/租赁合同（上传图片）- type=2时显示 -->
          <tui-upload
              :label="type === '1' ? '房产证' : '房产证/租赁合同'"
              :required="true"
              :maxCount="5"
              :preview="true"
              v-model="formData.house_doc_list"
              :server-url="'/api/file/upload'"
              @complete="handleUploadComplete($event,'house_doc_list')"
              @remove="handleImageRemove('house_doc_list')"
              placeholder="请上传房产证或租赁合同照片"
          ></tui-upload>

          <!-- 户口簿户主页（上传图片）- type=1时显示 -->
          <tui-upload
              v-if="type === '1'"
              label="户口簿户主页"
              :required="true"
              :maxCount="5"
              :preview="true"
              v-model="formData.household_main_list"
              :server-url="'/api/file/upload'"
              @complete="handleUploadComplete($event,'household_main_list')"
              @remove="handleImageRemove('household_main_list')"
              placeholder="请上传户口簿户主页照片"
          ></tui-upload>

          <!-- 户口簿增减页（上传图片）- type=1时显示 -->
          <tui-upload
              v-if="type === '1'"
              label="户口簿增减页"
              :required="true"
              :maxCount="5"
              :preview="true"
              v-model="formData.household_change_list"
              :server-url="'/api/file/upload'"
              @complete="handleUploadComplete($event,'household_change_list')"
              @remove="handleImageRemove('household_change_list')"
              placeholder="请上传户口簿增减页照片"
          ></tui-upload>

          <!-- 暂住证（上传图片）- type=1时显示 -->
          <tui-upload
              v-if="type === '1'"
              label="暂住证"
              :maxCount="5"
              :preview="true"
              v-model="formData.temporary_residence_list"
              :server-url="'/api/file/upload'"
              @complete="handleUploadComplete($event,'temporary_residence_list')"
              @remove="handleImageRemove('temporary_residence_list')"
              placeholder="请上传暂住证照片（非必填）"
          ></tui-upload>

          <!-- 低保证（上传图片）- type=2时显示 -->
          <tui-upload
              v-if="type === '2'"
              label="低保证"
              :required="true"
              :maxCount="5"
              :preview="true"
              v-model="formData.low_income_cert_list"
              :server-url="'/api/file/upload'"
              @complete="handleUploadComplete($event,'low_income_cert_list')"
              @remove="handleImageRemove('low_income_cert_list')"
              placeholder="请上传低保证照片"
          ></tui-upload>

          <div class="tui-btn__box">
            <tui-button
                height="84rpx"
                @click="submit"
                :disabled="loading"
                :loading="loading"
            >
              提交
            </tui-button>
          </div>
        </tui-form>
      </div>
    </div>

    <FooterTel></FooterTel>
  </div>
</template>

<script>
import PageTitle from '../components/pageTitle.vue'
import FooterTel from '../components/footerTel.vue'
import TuiCopyText from "../../components/thorui/tui-copy-text/tui-copy-text.vue";
const rules = [{
  name: "number",
  rule: ["required"],
  msg: ["请输入用户编号"]
},{
  name: "name",
  rule: ["required"],
  msg: ["请输入姓名"]
}, {
  name: "phone",
  rule: ["required", "isMobile"],
  msg: ["请输入手机号", "请输入正确的手机号"]
}, {
  name: "id_card_list",
  rule: ["required","file"],
  msg: ["请上传身份证照片","请上传身份证照片"]
}, {
  name: "house_doc_list",
  rule: ["required","file"],
  msg: ["请上传房产证或租赁合同照片","请上传房产证或租赁合同照片"]
},{
  name: "household_main_list",
  rule: ["required","file"],
  msg: ["请上传户口簿户主页照片","请上传户口簿户主页照片"]
},{
  name: "household_change_list",
  rule: ["required","file"],
  msg: ["请上传户口簿增减页照片","请上传户口簿增减页照片"]
}];
export default {
  name: 'MultiPeopleAddGasApplyFor',
  components: {
    TuiCopyText,
    PageTitle,
    FooterTel
  },
  data () {
    return {
      title: null,
      type: '1',
      formData: {
        openid:'',
        type:'1', // 1-一户多人口申请 2-低保户申请
        number: "", // 用户编号
        name: "", // 用户姓名
        phone: "", // 用户电话
        // 图片字段（存储临时路径或服务器URL）
        id_card_list: [], // 身份证
        // 共用字段
        house_doc_list: [], // 房产证/租赁合同（type=2时使用）
        // type=1专用字段
        house_property_list: [], // 房产证
        household_main_list: [], // 户口簿户主页
        household_change_list: [], // 户口簿增减页
        temporary_residence_list: [], // 暂住证
        // type=2专用字段
        low_income_cert_list: [], // 低保证
        // 图片字段（存储临时路径或服务器URL）
        id_card: '', // 身份证
        // 共用字段
        house_doc: '', // 房产证/租赁合同（type=2时使用）
        // type=1专用字段
        house_property: '', // 房产证
        household_main: '', // 户口簿户主页
        household_change: '', // 户口簿增减页
        temporary_residence: '', // 暂住证
        // type=2专用字段
        low_income_cert: '' // 低保证
      },
      rules: rules,
      loading: false,
      openId: null,
    };
  },

  async onShow () {

  },
  async onLoad (e) {
    const vm = this;
    vm.title = e.title
    // 一户多人口申请
    this.type = '1'
  },
  created () {
  },
  methods: {
    getUrlParams() {
      const params = {};
      // 获取当前页面完整 URL
      const url = window.location.href;
      // 匹配 ? 后的参数部分（兼容 hash 模式：# 后面的 ? 参数）
      const paramStr = url.includes("?") ? url.split("?")[1] : "";

      if (paramStr) {
        // 分割多个参数（& 分隔）
        const paramArr = paramStr.split("&");
        paramArr.forEach(item => {
          // 分割 key 和 value（= 分隔）
          const [key, value] = item.split("=");
          if (key) {
            params[key] = decodeURIComponent(value || ""); // 解码特殊字符（如中文、空格）
          }
        });
      }
      return params;
    },
    handleUploadComplete(res, fieldName) {
      console.log("上传完成", res);
      // 仅处理上传成功的状态（根据组件实际状态码调整，此处假设status!==2为成功）
      if (res.status) {
        // 过滤掉失败的文件（状态为3的项，根据组件实际定义调整）
        const successFiles = res.imgArr.filter(file => file.status !== 3);
        // 直接赋值完整的成功文件数组（包含多个文件地址）
        this.formData[fieldName] = successFiles;
        console.log("更新后的多文件地址：", this.formData[fieldName]);
      }
    },
    handleImageRemove(fieldName) {
      // 移除后直接同步表单数据（此时组件已更新imageList）
      this.formData[fieldName] = [...this.formData[fieldName]];
    },
    async submit () {
      const vm = this;
      console.log("提交时完整的formData：", JSON.parse(JSON.stringify(vm.formData)));
      vm.getId()
      // 状态同步，后端写一套代码就够了
      this.formData.type  = '一户多人气量增加申请';
      if (!vm.$refs.form) return;
      this.loading = true;
      try {
        vm.$refs.form.validate(vm.formData, vm.rules).then(res => {
          vm.formData.openid = vm.openId
          vm.formData.idCard = vm.formData.id_card_list.join(',')
          vm.formData.houseDoc = vm.formData.house_doc_list.join(',')
          vm.formData.houseProperty = vm.formData.house_property_list.join(',')
          vm.formData.householdMain = vm.formData.household_main_list.join(',')
          vm.formData.householdChange = vm.formData.household_change_list.join(',')
          vm.formData.temporaryResidence = vm.formData.temporary_residence_list.join(',')
          vm.formData.lowIncomeCert = vm.formData.low_income_cert_list.join(',')
          vm.loading = true
          vm.tui.request('/api/gasstep/add', 'post', vm.formData, false, false, true).then((res) => {
            if (res.code == 200) {
              uni.showToast({
                icon: "success",
                title: '添加成功'
              });
              setTimeout(() => {
                vm.formData = {}
                uni.redirectTo({
                  url: '/pages/index/index'
                });
              }, 500);
            } else {
              uni.showToast({
                icon: "error",
                title: '添加失败'
              });
            }
            vm.loading = false
          }).catch((e) => {
          })
        }).catch(errors => {
          console.log(errors)
          this.loading = false;
        })
      } catch (error) {
        console.error("上传图片失败：", error);
        this.loading = false;
      }
    },
    getId () {
      const vm = this;
      vm.openId = uni.getStorageSync('openId')
      // vm.openId = 'ou_2398f89wfgw98ft4378'
      // 没有openId跳转获取code页面
      if (!vm.openId) return vm.func.goto('/pages/getCode/index')
    }
  },
  mounted () {
    const vm = this;
    // vm.getId()
  },
};
</script>

<style lang="scss" scoped>
@import "../../static/css/module.scss";
.heating-apply-for {
  padding-bottom: 20px;
  .boxTitle {
    margin: 10px 14px;
  }
  .detailContent,
  .tips {
    padding: 0 18px 20px;
    margin: 14px;
    font-size: 15px;
    line-height: 22px;
    overflow: hidden;
    .title {
      width: 100%;
      height: 30px;
      padding-left: 14px;
      line-height: 30px;
      font-size: 17px;
      font-weight: bold;
      color: #222;
      box-sizing: border-box;
      margin: 10px 0;
    }
    :v-deep .tui-textarea__wrap,
    :v-deep .tui-input__wrap {
      padding: 12px 0 12px 8px !important;
    }
    :v-deep .tui-placeholder,
    :v-deep .tui-textarea__label,
    :v-deep .tui-textarea__self,
    :v-deep .uni-input-placeholder,
    :v-deep .tui-input__label,
    :v-deep.tui-input__self {
      font-size: 15px !important;
      uni-text,
      text {
        font-size: 15px !important;
      }
    }
    :v-deep.tui-textarea__wrap {
      align-items: flex-start !important;
    }
    :v-deep .tui-input__required {
      left: 0;
      top: 45%;
    }
    .tui-btn__box {
      padding-top: 30px;
    }
  }
  :v-deep .tui-form__errmsg {
    left: 14px;
    right: 14px;
  }
}
</style>